<template>
  <div class="main">
    <div class="workspace">
      <form class="login-form" @submit.prevent="readySubmit">
        <!-- @submit表示事件绑定，表单中的submit点击之后将会触发绑定的相应事件
                （也就是相应的函数）；而后面的prevent是事件修饰符，这里对应表示组织默认提交事件 -->
        <!--定义表单-->
        <h2>管理员登录</h2>
        <!--输入账号-->
        <div class="form-account">
          <label for="username">账号：</label>
          <input type="text" id="username" v-model="form.username" placeholder="请输入账号" required @input="clearError">
        </div>
        <!-- v-model用于双向数据绑定，这里绑定对象是form的username变量
                palceholder是输入框在没有输入内容的时候默认显示的提示文字
                required表示这个表单控件在点击提交的时候必须被填写
                @input是一个事件绑定，在这个标签的input被执行的时候，绑定的函数clearError就会被执行 -->

        <!-- 输入密码 -->
        <div class="password-form">
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="form.password" placeholder="请输入密码" required @input="clearError"
            @keyup.enter="readySubmit">
        </div>

        <!-- 错误提示 -->
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>

        <!-- 登录按钮 -->
        <button type="submit" class="form-button" :disabled="isloading">
          <span v-if="!isloading">点击登录</span>
          <span v-else>登录中···</span>
        </button>
      </form>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
//表单数据
const form = ref({
  username: '',
  password: ''
});
//状态管理
const errorMessage = ref("");//开始的时候是没有错误信息的
const isloading = ref(false);//是否正在登入
const router = useRouter();


// const readySubmit = () => {
//   errorMessage.value = "";
//   isloading.value = true;
//   // 简单前端校验
//   setTimeout(() => {
//     if (form.value.username === 'admin' && form.value.password === '123456') {
//       ElMessage.success('登录成功');
//       localStorage.setItem('adminId', form.value.username);
//       router.push('/adminMain');
//     } else {
//       ElMessage.error('账号或密码错误');
//       errorMessage.value = '账号或密码错误';
//     }
//     isloading.value = false;
//   }, 800); // 模拟网络延迟
// }



const readySubmit = async () => {
  try {
    const response = await axios.post('http://localhost:8080/admin/login', {
      'loginId': form.value.username,
      'password': form.value.password,
    });
    if (response.data.code == 200) {
      //登录成功
      ElMessage.success('登录成功');
      localStorage.setItem('adminId', form.value.username);
      router.push('/adminMain');
    } else {
      //登录失败
      ElMessage.error(response.data.msg || '账号或密码错误');
    }
  } catch (error) {
    //网络错误
    ElMessage.error('网络错误，请稍后再试');
  }
}
//错误信息的清除
const clearError = () => {
  errorMessage.value = "";
}
</script>
<style lang='scss' scoped>
.main {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.workspace {
  display: flex;
  height: 100%;
  width: 420px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 6px 32px rgba(90, 169, 233, 0.15);
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 100%;
  padding: 2.5rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(90, 169, 233, 0.10);

  h2 {
    text-align: center;
    color: #357ab8;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    letter-spacing: 2px;
  }

  .form-account,
  .password-form {
    margin-bottom: 1.5rem;

    label {
      display: block;
      margin-bottom: 0.5rem;
      color: #357ab8;
      font-size: 1.1rem;
      font-weight: 500;
    }

    input {
      width: calc(100% - 30px);
      padding: 0.9rem;
      padding-right: 12px;
      border: 1.5px solid #bcdffb;
      border-radius: 6px;
      font-size: 1.1rem;
      background: #f7fbfe;
      transition: border 0.2s;

      &:focus {
        border-color: #5ba9e9;
        outline: none;
        background: #fff;
      }
    }
  }

  .error-message {
    color: #f56c6c;
    margin-bottom: 1.2rem;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 1px;
  }

  .form-button {
    width: 100%;
    padding: 0.9rem;
    background: linear-gradient(90deg, #5ba9e9 0%, #357ab8 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.15rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(90, 169, 233, 0.10);
    transition: background 0.2s, box-shadow 0.2s;

    &:hover:not(:disabled) {
      background: linear-gradient(90deg, #357ab8 0%, #5ba9e9 100%);
      box-shadow: 0 4px 16px rgba(90, 169, 233, 0.18);
    }

    &:disabled {
      background: #bcdffb;
      cursor: not-allowed;
    }
  }
}
</style>
<!-- <template>
  <div class="login-container">
    <form @submit.prevent="handleLogin" class="login-form">
      <h2>用户登录</h2>
      
      账号输入
      <div class="form-group">
        <label for="username">账号：</label>
        <input
          type="text"
          id="username"
          v-model="form.username"
          placeholder="请输入账号"
          required
          @input="clearError"
        >
      </div>

      密码输入
      <div class="form-group">
        <label for="password">密码：</label>
        <input
          type="password"
          id="password"
          v-model="form.password"
          placeholder="请输入密码"
          required
          @input="clearError"
          @keyup.enter="handleLogin"
        >
      </div>

      错误提示
      <div v-if="errorMessage" class="error-message">
        {{ errorMessage }}
      </div>

      登录按钮
      <button type="submit" class="login-btn" :disabled="loading">
        <span v-if="!loading">🔑 登录</span>
        <span v-else>登录中...</span>
      </button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router' // 如果集成路由需要

// 表单数据
const form = ref({
  username: '',
  password: ''
})

// 状态管理
const errorMessage = ref('')
const loading = ref(false)
const router = useRouter() // 如果使用路由跳转

// 登录处理
const handleLogin = async () => {
  // 简单表单验证
  if (!form.value.username || !form.value.password) {
    errorMessage.value = '账号和密码不能为空'
    return
  }

  try {
    loading.value = true
    // 这里替换为实际的 API 调用
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(form.value)
    })

    if (!response.ok) throw new Error('登录失败')
    
    // 登录成功处理
    const data = await response.json()
    localStorage.setItem('token', data.token)
    router.push('/dashboard') // 跳转到主页
  } catch (err) {
    errorMessage.value = '账号或密码错误'
  } finally {
    loading.value = false
  }
}

// 清除错误信息
const clearError = () => {
  errorMessage.value = ''
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f0f2f5;
}

.login-form {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 400px;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
}

input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.1);
}

.error-message {
  color: #f56c6c;
  margin-bottom: 1rem;
  text-align: center;
}

.login-btn {
  width: 100%;
  padding: 0.8rem;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}

.login-btn:hover {
  background: #66b1ff;
}

.login-btn:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}
</style> -->
